<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="font-bold">新增管理员</div>
            </template>
            <el-form :model="formData" ref="adminFormEl" :rules="adminInfoRules">
                <el-form-item label="管理员名称" prop="admin_name">
                    <el-input v-model="formData.admin_name"></el-input>
                </el-form-item>
                <el-form-item label="管理员密码" prop="admin_pwd">
                    <el-input type="password" v-model="formData.admin_pwd"></el-input>
                </el-form-item>
                <el-form-item label="性别" class="ml-[40px] flex flex-row items-center" prop="admin_sex">
                    <el-radio-group v-model="formData.admin_sex" class="ml-4">
                        <el-radio label="男" size="large">男</el-radio>
                        <el-radio label="女" size="large">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" class="ml-[30px]" prop="admin_tel">
                    <el-input v-model="formData.admin_tel"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" class="ml-[40px]" prop="admin_email">
                    <el-input v-model="formData.admin_email"></el-input>
                </el-form-item>
                <el-form-item class="ml-[40px]" label="头像" prop="admin_photo">
                    <el-upload v-loading="isUploadingImg" element-loading-text="正在上传图片" :show-file-list="false"
                        :action="baseURL + '/adminInfo/uploadAdminPhoto'" :before-upload="beforeUpload"
                        :on-success="uploadSuccess" :headers="{ softeem_ele_admin_token: store.token }"
                        name="admin_photo"
                        class="w-[160px] h-[160px] border border-dashed border-gray-300 flex flex-row justify-center items-center">
                        <el-image class="w-full h-full" fit="contain" lazy :src="baseURL + formData.admin_photo"
                            v-if="formData.admin_photo">
                            <template #placeholder>
                                <div
                                    class="text-primaryColor text-[14px] w-full h-full flex flex-row justify-center items-center">
                                    正在加载图片...</div>
                            </template>
                        </el-image>
                        <el-icon size="55px" color="#808080" v-else>
                            <PictureFilled />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="管理员类型" class=" flex flex-row items-center" prop="admin_type">
                    <el-radio-group v-model="formData.admin_type" class="ml-4">
                        <el-radio :label="0" size="large">普通管理员</el-radio>
                        <el-radio :label="1" size="large">超级管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm" :loading="isSubmiting" :loading-icon="Loading">
                        保存数据
                    </el-button>
                    <el-button type="danger" @click="resetForm">重置表单</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </page-view>
</template>

<script setup>
import { PictureFilled, Loading } from "@element-plus/icons-vue";
import { mainStore } from "../../store"
import { ref, reactive, inject } from "vue"
import { ElNotification } from "element-plus"

import { useRouter, useRoute } from "vue-router"
import API from "../../utils/API";

// 路由管理对象
const router = useRouter();
// 路由单体对象
const route = useRoute();

const baseURL = inject("baseURL")
const store = mainStore();
const formData = ref({
    id: "",
    admin_name: "",
    admin_pwd: "",
    admin_sex: "",
    admin_tel: "",
    admin_email: "",
    admin_photo: "",
    admin_type: 0
})




const adminInfoRules = {
    admin_name: [{ required: "true", message: "请输入名称", trigger: "blur" }],
    admin_pwd: [{ required: "true", message: "请输入密码", trigger: "blur" }],
    admin_sex: [{ required: "true", message: "请设置性别", trigger: "blur" }],
    admin_tel: [{ required: "true",pattern:"^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$", message: "电话格式不正确", trigger: "blur" }],
    admin_email: [{ required: "true", message: "请输入正确邮箱", trigger: "blur" }],
    admin_photo: [{ required: "true", message: "请上传头像", trigger: "blur" }],
    admin_type: [{ required: "true", message: "请设置管理员类型", trigger: "blur" }]
}



// 上传图片之前的回调
const isUploadingImg = ref(false);
const beforeUpload = (rawFile) => {
    // console.log(rawFile);
    let reg = /^image\/(jpe?g|png|webp|gif|bmp)/;
    if (reg.test(rawFile.type)) {
        // 说明是一个图片
        if (rawFile.size / 1024 / 1024 > 5) {
            // 说明上传的图片大于5M
            ElNotification({
                type: "warning",
                title: "提示",
                message: "图片大小不能大于5M"
            })
            // 此时都不成功，返回false
            return false;
        }
        else {
            isUploadingImg.value = true;
        }
    } else {
        // 不是一个图片
        ElNotification({
            type: "error",
            title: "错误",
            message: "请选择正确的图片信息，必须是jpeg,jpg,png,webp,gif,bmp"
        })
        return false;
    }
}

// 上传图片成功的回调
const uploadSuccess = (result) => {
    // console.log("cg");
    // console.log(result);
    formData.value.admin_photo = result.data;
    isUploadingImg.value = false;
}


// 提交表单

const adminFormEl = ref(null);
const submitForm = () => {
    
    adminFormEl.value.validate(valid => {
        if (valid) {
            addAdminInfo();
        }
        else {
            ElNotification({
                type: "warning",
                title: "警告",
                message: "验证不通过，请重试"
            })
        }
    })
}

// 编写编辑管理员的方法
const isSubmiting = ref(false);
const addAdminInfo = () => {
    isSubmiting.value = true;
    API.adminInfo.add(formData.value)
        .then(result => {
            ElNotification({
                type: "success",
                title: "修改成功",
                message: "管理员信息修改成功"
            })
            router.replace({ name: 'AdminInfoList' })
        }).catch(error => {
            ElNotification({
                type: "warning",
                title: "修改失败",
                message: "管理员信息修改失败"
            })
        }).finally(() => {
            isSubmiting.value = false;
        })
}

// 重置表单
const resetForm = () => {
    adminFormEl.value.resetFields();
}

</script>


<style lang="scss" scoped>
:deep(.el-upload) {
    @apply w-full h-full overflow-hidden;
}
</style>